<template>
	<view class="container">
		<u-sticky bgColor="#fff" >
		    <u-tabs :list="goodsTypes" lineColor="#ff5a5f" lineHeight="8" lineWidth="22" :activeStyle="{color: '#ff5a5f'}" @click="switchGoodsType"></u-tabs>
		</u-sticky>
		
		<view v-if="goodsList.length > 0">
			<u-list
				@scrolltolower="scrolltolower"
			>
				<u-list-item v-for="(item, index) in goodsList" :key="index">
					<u-cell>
						<view slot="title">
							<view class="goods-info flex">
								<u-text color="#333" :bold="true" size="32" :lines="2" :text="item.goods_name"></u-text>
								<view class="price-info flex">
									<view class="price-item flex">
										<u-text v-if="item.pay_type==1" size="36" :bold="true" color="#ff5a5f" :text="format(item.goods_golds,0)+'金币'"></u-text>
										<u-text v-if="item.pay_type==2" size="36" :bold="true" color="#ff5a5f" :text="format(item.goods_price,2)+'元+'+format(item.goods_golds,0)+'金币'"></u-text>
										<u-text v-if="item.pay_type==3" size="36" :bold="true" color="#ff5a5f" :text="format(item.goods_price,2)+'元'"></u-text>
									</view>
								</view>
								<template v-if="item.pay_type==1 || item.pay_type==2">
									<u-button type="warning" size="small" :disabled="userInfo.golds < item.goods_golds"  :text="userInfo.golds < item.goods_golds ? '金币不足' : '立即购买'" @click="buyGoods(item.id)"></u-button>
								</template>
								<template v-if="item.pay_type==3">
									<u-button type="warning" size="small" @click="buyGoods(item.id)" text="立即购买"></u-button>
								</template>
								
							</view>
						</view>
						<u-avatar
							slot="icon"
							shape="square"
							size="220"
							:src="item.cover"
							customStyle="margin: 10rpx 26rpx 10rpx 0"
						></u-avatar>
					</u-cell>
				</u-list-item>
			</u-list>
			
			<u-loadmore :status="loadStatus" fontSize="32"  />
		</view>
		
		<u-empty v-else text="即将发布,敬请期待哦" mode="history" :textSize="28"></u-empty>
	</view>
	
</template>

<script>
	import { goldsMallGoods,goldsMallGoodsTypes } from '@/api/api.js'
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('ftxUserInfo') || {},
				goodsTypes:[],
				activeGoodsType: 0,
				goodsList: [],
				filter: {
					page: 1,
					goods_type: 0
				},
				loadStatus: '',
			};
		},
		mounted() {
			this.loadGoodsTypes()
			this.loadGoodsList()
		},
		methods: {
			scrolltolower() {
				if ( this.loadStatus != 'nomore' ) {
					this.loadGoodsList()
				}
			},
			switchGoodsType(item) {
				this.activeGoodsType = item.goods_type
			},
			loadGoodsTypes: function() {
				goldsMallGoodsTypes().then(res => {
					this.goodsTypes = res.data
				})
			},
			loadGoodsList: function() {
				if ( this.loadStatus == 'nomore' ) {
					return
				}
				this.loadStatus = 'loading'
				goldsMallGoods(this.filter.goods_type,this.filter.page).then(res => {
					let _result = res.data || []
					if ( !_result.length ) {
						this.loadStatus = 'nomore'
					}
					this.goodsList = uni.$lv.array.union(this.goodsList , _result)
					this.loadStatus = ''
				})
			},
			buyGoods: function(goodsId) {
				uni.navigateTo({
					url: `/pages/mall/details?goodsId=${goodsId}`
				})
			},
			format(number , digtal) {
				return uni.$lv.number.format(number,digtal)
			}
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.loadStatus = 'more'
			this.filter.page = 1
			this.filter.goods_type = 0
			this.loadGoodsList()
			uni.stopPullDownRefresh()
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.filter.page++
			this.loadGoodsList()
		},
		watch:  {
			activeGoodsType: function(newVal , oldVal) {
				this.filter.goods_type = newVal
				this.filter.page = 1
				this.goodsList = []
				this.loadGoodsList()
			}
		}
	};
</script>

<style lang="scss">
	page {
		.u-list-item {
			background-color: #fff;
		}
		.goods-info {
			flex-direction: column;
			justify-content: space-between;
			height: 220rpx;
			.price-info {
				margin: 14rpx 0;
				justify-content: space-between;
			}
		}
	}
</style>
